<template>
    <van-popup
        round
        @click-overlay="closeBookPopup"
        v-model:show="props.showPopup"
        position="bottom"
        :style="{ height: '80%' }"
        @open="openPopup"
    >
        <div class="traveler">

            <div class="traveler-peo">
                选择<span style=" color: var(--van-primary-color); font-size: 20px;"> {{ valuenumber }}</span>位出行人
            </div>
            <div class="traveler-new" @click="onAdd">
                <span><van-icon name="add-o" size="2rem" /></span>
                <span>手动新增</span>
            </div>
            <div class="travelers">
                <van-checkbox-group v-model="checked"
                    style="width: 100%; height: 90%; overflow-y: auto; min-height: 30rem;margin-top: 5rem;margin-bottom: 5rem;">
                    <van-cell-group inset>
                        <van-cell v-for="(item, index) in updatedListpersons" clickable :key="item.id"
                            >
                            <div class="name" >
                                <span ><van-icon @click="handeledit(item)" name="edit" size="3rem"/></span>
                                <div>
                                    <span style="color: #333333; font-weight: 600;font-size: 16px;">{{ item.name }}</span>
                                    <span>{{ item.idCard }}</span>
                                </div>
                            </div>
                            <template #right-icon>
                                <van-checkbox :name="item.id" :ref="el => checkboxRefs[index] = el" @click.stop />
                            </template>
                        </van-cell>           
                    </van-cell-group>
                </van-checkbox-group>

            </div>
            <van-button type="primary" style="position: absolute; bottom: 2rem; width: 90%;" block
                @click="onSelect">确定</van-button>

        </div>

    </van-popup>
</template>
<script setup>
import {ref, defineProps, defineEmits, watchEffect} from "vue"
import { useRouter,useRoute } from "vue-router"
import { showToast } from 'vant'

const router =useRouter()
const route =useRoute()
const props = defineProps({
  showPopup: Boolean,
  listpersons: Object,
  valuenumber: Number,
  selectedPassengerList: Object,
  selectList: Array
})

const openPopup = () => {
  checked.value = []
  props.selectList.forEach((item) => {
    checked.value.push(item.id)
  })
}


const checked = ref([]);
const checkboxRefs = ref([]);
const emit = defineEmits(['closePopup', 'onSelect'])
const updatedListpersons = ref([]);


watchEffect(() => {
    if (props.listpersons) {
        updatedListpersons.value = props.listpersons.map(person => {
            return { ...person, tel: person.linkPhone };
        });
    }
});

// 新增
const onAdd = () => {
    router.push({ path: '/addapedestrian'})
};
// 编辑
function handeledit (item){

    router.push({path: '/pedestrianedit', query: {
        id: item.id,
        ...route.query
      }
    })
}


// 选择
const onSelect = () => {
  const list = []
  updatedListpersons.value.forEach((item) => {
    if (checked.value.includes(item.id)) {
      list.push(item)
    }
  })

  if (checked.value.length != props.valuenumber) {
      showToast(`请选择${props.valuenumber}位出行人`)
  } else {
      emit('onSelect', list)
      // checked.value=[]
      closeBookPopup()
  }
};

// 关闭
const closeBookPopup = () => {
    emit('closePopup')
}

// const toggle = (index) => {
//     checkboxRefs.value[index].toggle();
// };

// onBeforeUpdate(() => {
//     checkboxRefs.value = [];
// });

</script>
<style lang="scss" scoped>
.traveler {
    background: #f5f4f4;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
   
    // justify-content: center;
    .traveler-new {
        
        border-radius: 0.5rem;
        width: 92%;
        height: 6rem;
        background: #ffffff;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        span {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 2rem;
            width: 100%;
            margin-top: 0.5rem;
            color: #666666;
        }
    }

    .traveler-peo {
        width: 100%;
        height: 5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.8rem;
        font-weight: bold;
        // position: absolute;
        // top: 5rem;
    }

    .travelers {
        margin-bottom: 5rem;
        width: 100%;
        height: 60%;
        overflow-y: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        .name{
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: #666666;
            div{
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                padding-left: 4rem;
                //  border: 1px solid red;
                span{
                    display: flex;
                    align-items: center;
                    width: 100%;
                }
            }
        }
    }

    .traveler-peo1 {
        height: 5rem;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        background: #ffffff;
        margin: 1.5rem;
        border-radius: 0.5rem;
    }

    .traveler {
        height: 100%;
    }
}
</style>
